import 'package:flutter/material.dart';
import 'package:flutter_demo/pages/page_with_title.dart';
import 'package:flutter_demo/widgets/app_widgets.dart';

class IntrinsicPage extends PageWithTitle {
  const IntrinsicPage({super.key})
      : super("固有尺寸容器(IntrinsicWidth、IntrinsicHeight)");

  @override
  List<Widget> buildContentWidgets(BuildContext context) {
    return const [
      PrimaryTitle("简介"),
      BodyText("我们常见的布局是容器组件布局子组件时，将给定的尺寸约束传递给子组件，让"
          "他自行决定，像ListView这样的组件就会给item约束宽度铺满列表，但如果我们只想要组件以"
          "实际尺寸来显示，就可以通过固有尺寸容器来实现"),
      AppSpacer.large,
      _Example(),
      AppSpacer.mini,
      UlItem("IntrinsicWidth"),
      BodyText("固有宽度组件，预先测量子组件的固有宽度（即自适应内容宽度），再以固有宽度为约束"
          "对子组件进行布局"),
      LabelText("- stepWidth、stepHeight 进行固有尺寸测量后，若设置宽高步长，再按照步长约"
          "束重新矫正约束值"),

      AppSpacer.large,
      UlItem("IntrinsicHeight"),
      BodyText("IntrinsicWidth的固有高度测量版本"),
    ];
  }
}

class _Example extends StatelessWidget {
  const _Example();

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const PrimaryTitle("常见使用场景"),
        const BodyText("1、Container自适应内容大小"),
        Container(
          color: Theme.of(context).colorScheme.surfaceContainer,
          alignment: Alignment.center,
          child: const Text("自适应文本宽度"),
        ),
        const LabelText("Column对子组件没有强制指定宽度铺满，但Container默认会占满宽度"),
        AppSpacer.mini,
        IntrinsicWidth(
          child: Container(
            color: Theme.of(context).colorScheme.surfaceContainer,
            alignment: Alignment.center,
            child: const Text("自适应文本宽度"),
          ),
        ),
        const LabelText("使用IntrinsicWidth，让Container按照实际内容大小去决定宽度"),
        AppSpacer.mini,
        const BodyText("2、让Column自适应子项宽度并将所有子项强制铺满自身宽度"),
        IntrinsicWidth(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch, // 强制子组件占满宽度
            children: [
              ElevatedButton(onPressed: () {}, child: const Text("短按钮")),
              ElevatedButton(onPressed: () {}, child: const Text("这是一个长按钮")),
            ],
          ),
        ),
        const LabelText("IntrinsicWidth让Column计算每一项子项的宽度，取最大宽度为自身宽"
            "度，再通过CrossAxisAlignment.stretch使得布局子项时将所有子项宽度指定为自身宽"
            "度"),
        AppSpacer.mini,
        const BodyText("3、按照步长重新约束组件宽度，可以用于排版，也可以用于响应式布局适配不"
            "同尺寸的设备"),
        Wrap(
          children: List.generate(
            10,
            (index) => IntrinsicWidth(
              stepWidth: 60,
              child: Text(
                "item ${List.generate(index + 1, (charIndex) => '0').join("")}",
                style: TextStyle(
                  backgroundColor:
                      Theme.of(context).colorScheme.surfaceContainer,
                ),
              ),
            ),
          ),
        ),
        const LabelText("IntrinsicWidth会以stepWidth，stepHeight的整数倍决定自身的大"
            "小，但感觉用处不大就是了"),
        AppSpacer.mini,
        const NoticeText("注意：此组件需要额外计算子组件的固有宽度，有额外的性能开销，可以使"
            "用Row、Column、Wrap、UnconstrainedBox来替代"),
        Row(
          children: [
            Container(
              color: Theme.of(context).colorScheme.surfaceContainer,
              alignment: Alignment.center,
              child: const Text(
                "Row",
              ),
            ),
          ],
        ),
        Wrap(
          direction: Axis.vertical,
          children: [
            Container(
              color: Theme.of(context).colorScheme.surfaceContainer,
              alignment: Alignment.center,
              child: const Text(
                "Wrap",
              ),
            ),
          ],
        ),
        UnconstrainedBox(
          child: Container(
            color: Theme.of(context).colorScheme.surfaceContainer,
            alignment: Alignment.center,
            child: const Text(
              "UnconstrainedBox",
            ),
          ),
        ),
      ],
    );
  }
}
